<!-- created:2023/2/4 20:57 By AdinZ -->
<template>
  <el-drawer v-model="visible" direction="ltr" size="1100px">

    <div class="AdDetail">
      <el-form inline label-width="70px">
        <el-form-item label="广告备注">
          <el-input v-model="form.title" placeholder="广告备注"/>
        </el-form-item>
        <el-form-item label="投放时间">
          <el-date-picker v-model="form.date" placeholder="广告投放时间" value-format="x" type="datetimerange"
                          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
        </el-form-item>
        <el-form-item v-if="!form.status||form.status==0">
          <el-button type="primary" @click="handlerSubmit">保存</el-button>
          <el-button type="success" @click="handlerAddItems">添加</el-button>
        </el-form-item>
      </el-form>
      <div class="ad-detail">
        <el-table :data="form.items" stripe border style="width: 100%">
          <el-table-column label="序号" width="80" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="奖励类型" width="150" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.type">
                <el-option label="奖品" :value="0"/>
                <el-option label="未抽中" :value="9"/>
                <el-option label="积分" :value="1"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="奖品图片" width="100" align="center">
            <template #default="scope">
              <img v-if="scope.row.thumb" :src="scope.row.thumb" style="width: 80px;height: 80px"/>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300" align="center">
            <template #default="scope">
              <el-input v-if="scope.row.type==1" v-model="scope.row.price" placeholder="积分数量" type="number"/>
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="概率" width="150" align="center">
            <template #default="scope">
              <el-input v-if="scope.row.type==0" v-model="scope.row.rate" placeholder="中奖概率" type="number"/>
            </template>
          </el-table-column>

          <el-table-column label="管理" width="200" align="center">
            <template #default="scope">
              <el-button v-if="scope.row.type==0" type="primary" @click="handlerCheck(scope.$index)">选择</el-button>
              <el-button type="danger" icon="Delete" circle
                         @click="this.form.items=$api.deleteArray(this.form.items,scope.$index)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <AdList :show="adDialog" @close="adDialog=false" :result="adResult"/>
    </div>
  </el-drawer>
</template>

<script>
import AdList from "@/views/activity/components/AdList.vue";

export default {
  name: "AdDetail",
  components: {AdList},

  data() {
    return {
      visible: false,
      adDialog: false,
      form: {items: []},
      adResult: Function,
    }
  },

  methods: {
    handlerAddItems() {
      if (!this.form.items) this.form.items = []
      this.form.items.push({})
    },
    handlerCheck(index) {
      this.adResult = (data) => {
        this.form.items[index] = {
          lid: data.id,
          title: data.title,
          thumb: data.thumb,
          type: 0
        };
      }
      this.adDialog = true;
    },
    handlerSubmit() {
      this.form.startTime = this.form.date[0]
      this.form.endTime = this.form.date[1]
      this.$api.apiPost('/api/manage/activity-home-ad/', this.form, () => {
        this.visible = false;
        this.$emit('close')
      })
    },
    getDetail(id) {
      if (!id) {
        this.form = {items: []}
        this.visible = true
      } else {
        this.$api.get(`/api/manage/activity-home-ad/${id}`).then(res => {
          res.data.date = [res.data.startTime, res.data.endTime]
          this.form = res.data
          this.visible = true
        })
      }

    }
  }
}
</script>

<style scoped lang="scss">
.AdDetail {

}
</style>
